<template>
	<view
		style="background-color: #fff;padding: 20px;display: flex;flex-direction: column;margin-bottom: 10px;border-radius: 5px;">
		<!-- 订单 -->
		<view style="padding: 5px 0;display: flex;justify-content: space-between;align-items: center;">
			<view style="font-weight: bold;">
				<text>订单号: </text><text> {{data.order}}</text>
			</view>
			<view :style="'color:'+zipState(data.status).color+';'" @click="navState">
				{{zipState(data.status).name}}
			</view>
		</view>
		<!-- 类型 -->
		<view style="padding: 5px 0;display: flex;justify-content: space-between;">
			<text style="font-weight: bold;">订单类型: </text><text style="font-size: small;color:#888;">
				{{data.ditch}}</text>
		</view>
		<!-- 产品 -->
		<tn-read-more v-if="data.child.length > 0" style="padding: 5px 0;">
			<sub-product-card v-for="(puct, idx) in data.child" :key="idx" :data="puct.product" :fund="puct.num"
				:spec="puct.spec" line></sub-product-card>
		</tn-read-more>

		<!-- 虚拟产品 -->
		<view v-if="data.ditch === '会员权益' && false"
			style="padding: 5px 0;display: flex;justify-content: space-between;">
			<text style="font-weight: bold;">会员权益: </text><text style="font-size: small;color:#888;">
				{{data.node}}</text>
		</view>
		<!-- 流水 -->
		<view style="padding: 5px 0;display: flex;justify-content: space-between;">
			<text style="font-weight: bold;">流水号: </text><text style="font-size: small;color:#888;">
				{{data.reqsn}}</text>
		</view>
		<view style="padding: 5px 0;display: flex;justify-content: space-between;">
			<text style="font-weight: bold;">下单时间: </text><text style="font-size: small;color:#888;">
				{{data.created}}</text>
		</view>
		<!-- 订单金额 -->
		<view style="padding: 5px 0;display: flex;justify-content: space-between;">
			<text style="font-weight: bold;">订单金额: </text>
			<text v-if="data.payment === 'point'" style="font-size: small;color:#888;">
				{{data.aprice}}
			</text>
			<text v-else style="font-size: small;color:#888;">￥{{(data.aprice / 100).toFixed(2)}}</text>
		</view>
		<!-- 支付方式 -->
		<view v-if="data.payment !== null" style="padding: 5px 0;display: flex;justify-content: space-between;">
			<text style="font-weight: bold;">支付方式: </text><text style="font-size: small;color:#888;">
				{{zipPayment(data.payment).text}}</text>
		</view>
		<!-- 支付金额 -->
		<view v-if="data.payment === 'wxpay' && data.pay !== null"
			style="padding: 5px 0;display: flex;justify-content: space-between;">
			<text style="font-weight: bold;">支付金额: </text><text style="font-size: small;color:#888;">
				￥{{(data.pay.amount_total/100).toFixed(2)}}</text>
		</view>
		<view v-if="data.payment === 'wallet'" style="padding: 5px 0;display: flex;justify-content: space-between;">
			<text style="font-weight: bold;">支付余额: </text><text style="font-size: small;color:#888;">
				￥{{(data.aprice/100).toFixed(2)}}</text>
		</view>
		<view v-if="data.payment === 'master'" style="padding: 5px 0;display: flex;justify-content: space-between;">
			<text style="font-weight: bold;">抵扣金额: </text><text style="font-size: small;color:#888;">
				￥{{(data.aprice/100).toFixed(2)}}</text>
		</view>
		<view v-if="data.payment === 'point'" style="padding: 5px 0;display: flex;justify-content: space-between;">
			<text style="font-weight: bold;">支付积分: </text><text style="font-size: small;color:#888;">
				{{data.aprice}}</text>
		</view>
		<!-- 代金券 -->
		<view v-if="data.card_coupon !== null" style="padding: 5px 0;display: flex;justify-content: space-between;">
			<text style="font-weight: bold;">代金券: </text><text style="font-size: small;color:#888;">
				￥{{(data.card_coupon.value / 100).toFixed(2)}}</text>
		</view>
		<!-- 兑换券 -->
		<view v-if="data.card_product !== null" style="padding: 5px 0;display: flex;justify-content: space-between;">
			<text style="font-weight: bold;">兑换券: </text><text style="font-size: small;color:#888;">
				{{data.card_product.cardpt.name}} + ￥{{(data.card_product.cardpt.cur_card/100).toFixed(2)}}</text>
		</view>
		<!-- 备注 -->
		<view v-if="data.node !== null && data.ditch !== '会员权益'"
			style="padding: 5px 0;display: flex;justify-content: space-between;">
			<text style="font-weight: bold;">备注: </text><text style="font-size: small;color:#888;">
				{{data.node}}</text>
		</view>
		<!-- 收货人 -->
		<view v-if="data.addre !== null" style="padding: 5px 0;">
			<view>
				<view style="display: flex;justify-content: space-between;">
					<view style="font-weight: bold;">收货人</view>
					<view style="display: flex;gap: 10px;font-size: small;">
						<text style="color: #888;">{{zipStr(data.addre.name)}}
							{{zipStr(data.addre.phone)}}</text>
						<tn-icon :name="showAddress?'down':'right'"
							@click.stop="()=>{this.showAddress=!this.showAddress}"></tn-icon>
					</view>
				</view>
				<view v-if="showAddress" class="" style="font-size: small;padding: 10px;color:#888;text-align: right;">
					{{data.addre.sheng}}{{data.addre.shi}}{{data.addre.xian}}
					{{data.addre.address}}
				</view>
			</view>
		</view>
		<!-- 物流 -->
		<view v-if="data.traffic !== null" style="padding: 5px 0;">
			<view>
				<view style="display: flex;justify-content: space-between;">
					<view style="font-weight: bold;">物流单</view>
					<view style="display: flex;gap: 10px;font-size: small;">
						<text style="color: #888;">{{data.traffic.trade_name}}
							{{data.traffic.trade_no}}</text>
						<tn-icon :name="showTraffic?'down':'right'"
							@click.stop="()=>{this.showTraffic=!this.showTraffic}"></tn-icon>
					</view>
				</view>
				<view v-if="showTraffic" class="" style="font-size: small;padding: 10px;color:#888;">
					<tn-empty mode="list"></tn-empty>
				</view>
			</view>
		</view>
		<!--互动-->
		<view style="padding: 5px 0;display: flex;justify-content: flex-end;gap: 10px;">
			<!-- view v-if="data.status === 0" class="reqsn-method-button" @click="EventPay">立即支付</view -->
			<view v-if="data.status === 0" class="reqsn-method-button" @click="EventRemove">移除订单</view>
			<view v-if="data.status === 1" class="reqsn-method-button" @click="EventAlert">提醒发货</view>
			<view v-if="data.status > 1" class="reqsn-method-button" @click="EventDelivery">查看物流</view>
			<view v-if="data.status === 2" class="reqsn-method-button" @click="EventOver">确认收货</view>
			<view v-if="data.status === 3" class="reqsn-method-button" @click="EventRate">立即评价</view>
			<view class="reqsn-method-button" @click="EventService">联系客服</view>
		</view>
	</view>
</template>

<script>
	import utils from '@/common/utils';
	var plugin = requirePlugin('logisticsPlugin')
	export default {
		name: "sub-reqsn-card",
		data() {
			return {
				sConf: getApp().globalData,
				showAddress: false,
				showTraffic: false,
			};
		},
		props: {
			data: {
				type: Object,
				default: null
			}
		},
		methods: {
			zipStr(e) {
				return utils.zipStr(e)
			},
			zipState(e) {
				return utils.hasReqsnState(e)
			},
			zipPayment(e) {
				return utils.hasPayMent(e)
			},
			/**
			 * 移除订单
			 */
			requestRemove() {
				let host = this.sConf.host + '/weapps/listReqsn/' + this.data.id + '/';
				let token = this.sConf.token || '';
				utils.authenticatorOnDelete(host, token).then(res => {
					console.log('移除订单', res);
					uni.navigateTo({
						url: '/pageb/reqsn/paystate?state=success'
					})
				}).catch(err => {
					console.log('移除订单__失败');
					uni.showToast({
						title: '移除失败'
					})
				})
			},
			/**
			 * 发货提醒
			 */
			requestAlert() {
				let host = this.sConf.host + '/weapps/alertReqsn/';
				let token = this.sConf.token || '';
				let data = {
					reqsn: this.data.reqsn
				}
				utils.authenticatorOnPost(host, token, data).then(res => {
					console.log('发货提醒', res);
					uni.showToast({
						title: '成功'
					})
				}).catch(err => {
					console.log('发货提醒__失败');
					uni.showToast({
						title: '失败'
					})
				})
			},
			/**
			 * 订单签收
			 */
			requestOver() {
				let host = this.sConf.host + '/weapps/overReqsn/';
				let token = this.sConf.token || '';
				let data = {
					reqsn: this.data.reqsn
				}
				utils.authenticatorOnPost(host, token, data).then(res => {
					console.log('订单签收', res);
					uni.navigateTo({
						url: '/pageb/reqsn/paystate?state=success'
					})
				}).catch(err => {
					console.log('订单签收__失败');
					uni.showToast({
						title: '失败'
					})
				})
			},
			EventPay() {
				console.log('EventPay');
				uni.showToast({
					title: '暂未开通'
				})
			},
			EventRemove() {
				console.log('EventRemove');
				let that = this;
				uni.showModal({
					title: '移除订单',
					content: '是否需要移除该订单？',
					success(res) {
						if (res.confirm) {
							that.requestRemove();
						}
					}
				})
			},
			EventAlert() {
				console.log('EventAlert');
				let that = this;
				uni.showModal({
					title: '发货提醒',
					content: '是否需要发货提醒？',
					success(res) {
						if (res.confirm) {
							that.requestAlert();
						}
					}
				})
			},
			EventDelivery(e) {
				console.log('查看物流', e);
				let waybillToken = this.data.traffic.waybill_token || null;
				console.log('waybillToken', waybillToken);
				if (Boolean(waybillToken)) {
					plugin.openWaybillTracking({
						waybillToken: waybillToken
					});
				}
			},
			EventOver() {
				console.log('EventOver');
				let that = this;
				uni.showModal({
					title: '确认签收',
					content: '是否需要确认签收？',
					success(res) {
						if (res.confirm) {
							that.requestOver();
						}
					}
				})
			},
			EventRate() {
				console.log('EventRate');
				uni.showToast({
					title: '暂未开通'
				})
			},
			EventService() {
				console.log('EventService');
				uni.showToast({
					title: '暂未开通'
				})
			},
			navState() {
				if (this.data.status === 0) {
					uni.navigateTo({
						url: '/pageb/reqsn/paystate?reqsn=' + this.data.reqsn
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.reqsn-method-button {
		padding: 10px 20px;
		border: 1px solid #888;
		border-radius: 5px;
		font-size: small;
	}
</style>